<template>
  <Tree :data="treeNodes" ref="tree"
        :show-checkbox="showCheckbox"
        check-strictly
        @on-check-change="checkNode" />
</template>

<script>
export default {
  props: {
     treeNodes: {
        type: Array,
        required: true ,
     },
     showCheckbox: {
        type: Boolean ,
        required: false,
        default: false
     }
  },
  methods: {
    checkNode(checkNodes, node) {
       if (node.checked) {
         // 勾选node它的所有父亲
         this.getParentNodes(node).forEach(n => n.checked = true);
       }
       // 勾选与取消它的所有子节点
       this.getChildren(node).forEach(n => n.checked = node.checked);
    },
    getCheckedAndIndeterminateNodes(){ // 获取所有选中的(包含半选的）节点
       return this.$refs.tree.getCheckedAndIndeterminateNodes();
    },
    getChildren(node) {
       let array = [] ;
       if (node.children !=null && node.children.length !=0) {
            array.push(...node.children) ;
           for(let n of node.children) {
             array.push(...this.getChildren(n));
           }
       }
       return array ;
    },
    getParentNodes(node) {
       let nodes = [] ;
       // 获取当前节点的 ID
       let nodeId = node.id  ;
       // 找到 nodeId 对应的 节点
       let $node = this.nodesAll.find(n => n.id === nodeId) ;

       if ($node.pid !=null) {
          // 找他的父亲
          let parentNode = this.nodesAll.find(n => n.id == $node.pid) ;
          if (parentNode !=null) {
            nodes.push(parentNode) ;
            nodes.push(...this.getParentNodes(parentNode));
          }
       }
       return nodes ;
    },
    getNodes(node, pid) {
      let nodes = [] ;
      // 获取所有的孩子 节点
      let children = node.children ;
      node.pid = pid ;
      // 移除孩子 节点
      nodes.push(node) ;
      // 遍历所有的孩子， 并 找到
      if (children !=null && children?.length !=0) {
        for(let n of children) {
          nodes.push(...this.getNodes(n, node.id)) ;
        }
      }
      return nodes ;
    }
  },
  computed: {
     nodesAll() {
        // 获取所有的 node , 不带 children , 方便找 父和子
        // 遍历所有的一级节点树、
        let allNodes = [] ;
        this.treeNodes.forEach(node => {
          allNodes.push(...this.getNodes(node, null));
        }) ;
        return allNodes ;
     }
  }
}
</script>

<style scoped>

</style>